<!DOCTYPE html>
<html>
<head>
	<title>手风琴特效</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	body{
		background:#ccc;
	}
	ul{
		margin: 100px auto;
		box-shadow: 0 0 10px 1px rgba(0,0,0,0.5);
		width: 805px;
		height: 320px;
		overflow: hidden;
		list-style: none;
	}
	li{
		border-left: 1px solid #888;
		transition: all 1s;
		box-shadow: 0 0 25px 10px rgba(0,0,0,0.5);
		position: relative;
		float: left;
		width: 160px;
	}
	li>div{
		background: rgba(0,0,0,0.5);
		position: absolute;
		bottom: 0;
		left: 0;
		width: 640px;
	}
	li>div>a{
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 20px;
		font-size: 16px;
	}

	ul:hover li {width: 40px;}
	ul li:hover {width: 640px;}
	</style>
</head>
<body>
<ul>
	<li>
		<div>
			<a href="javascript:void(0);">
				功夫熊猫
			</a>
		</div>
		<a href="javascript:void(0);">
			<img src="./1.jpg">
		</a>
	</li>
	<li>
		<div>
			<a href="javascript:void(0);">
				机器人总动员
			</a>
		</div>
		<a href="javascript:void(0);">
			<img src="./2.jpg">
		</a>
	</li>
	<li>
		<div>
			<a href="javascript:void(0);">
				玩具总动员
			</a>
		</div>
		<a href="javascript:void(0);">
			<img src="./3.jpg">
		</a>
	</li>
	<li>
		<div>
			<a href="javascript:void(0);">
				环屋旅行记
			</a>
		</div>
		<a href="javascript:void(0);">
			<img src="./4.jpg">
		</a>
	</li>
	<li>
		<div>
			<a href="javascript:void(0);">
				汽车总动员
			</a>
		</div>
		<a href="javascript:void(0);">
			<img src="./5.jpg">
		</a>
	</li>

</ul>
</body>
</html>